<template>
    <div class="app-main" ref="appMainRef" w-full h-full @contextmenu.stop.native="showMainContextMenu">
        <div class="app-main-header"></div>
        <div class="app-main-date">
            <div class="app-main-date-box flex-center">
                <div class="app-main-date-box-time">
                    <span>{{ formatDate(time, 'HH') }}</span>
                    <span class="time-circle">:</span>
                    <span>{{ formatDate(time, 'mm') }}</span>
                    <span class="time-circle">:</span>
                    <span>{{ formatDate(time, 'ss') }}</span>
                </div>
                <div class="app-main-date-box-week">
                    <span>{{ formatDate(time, 'MM') }}月{{ formatDate(time, 'DD') }}日</span>
                    <span>星期{{ getWeekByDate(time) }}</span>
                    <span>{{ getLunarByDate(time) }}</span>
                </div>
            </div>
        </div>
        <div w-full>
            <div class="app-main-search" @contextmenu.stop.native="() => { }">
                <div class="se-input-box flex-x">
                    <div class="se-select flex-center" @click.stop="handleShowSelect">
                        <img :src="selectSeTyle.icon" class="se-icon" />
                        <el-icon size="10" class="se-down-icon" color="rgba(var(--alpha-color),.52)">
                            <CaretBottom />
                        </el-icon>
                    </div>
                    <input class="se-input" ref="inputRef" v-model="searchInput" w-full type="text" autofocus
                        autocomplete="off" maxlength="200" placeholder="输入搜索内容" @input="handleSearch" @focus="inputFocus"
                        @blur="focusFlag = false" @keydown.stop="inputKeyEvent" />
                    <div class="se-close flex-center" :class="{ 'clear': !searchInput }" @click="handleReset">
                        <el-icon size="20px" color="rgba(var(--alpha-color),.52)">
                            <Close />
                        </el-icon>
                    </div>
                    <div class="se-select flex-center" title="搜索" @click="handleGoSearch(searchInput)">
                        <i class="iconfont icon-sousuo icon-bg" style="font-size: 20px;"></i>
                    </div>
                </div>

                <div class="se-all" :class="{ 'se-all-show': showSelectList }">
                    <ul class="se-ul">
                        <li class="se-li" v-for="item in seList" :key="item.title" @click="handleSelectSeType(item)">
                            <div class="se-li-icon flex-center">
                                <img :src="item.icon" class="se-icon" />
                            </div>
                            <p leh-20>{{ item.title }}</p>
                        </li>
                        <li class="se-li">
                            <div class="se-li-icon flex-center">
                                <el-icon size="20" :style="{ color: 'var(--primary-color)' }">
                                    <Plus />
                                </el-icon>
                            </div>
                            <p leh-20>添加</p>
                        </li>
                    </ul>
                </div>

                <div class="se-result" :class="{ 'se-result-show': showSearchResult }">
                    <ul class="se-result-ul">
                        <li class="se-result-li" flex @click="handleTranslate">
                            <i class="iconfont icon-yuyan" mr10></i>
                            <span>翻译</span>
                            <span flex-1></span>
                            <span :style="{ color: 'rgba(var(--alpha-color),.3)' }" fs-12>Alt+Enter</span>
                        </li>
                        <li class="se-result-li" :class="{ 'result-active': searchInput == item.content }" flex
                            v-for="item in searchResultList" :key="item.id" @click="handleGoSearch(item.content)">
                            <i class="iconfont icon-sousuo" mr10></i>
                            <span>{{ item.content }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="app-main-icons">
            <AppIcons ref="appIconsRef" />
        </div>
        <div class="app-main-footer flex-y">
            <div class="app-yiyan">
                <div class="app-yiyan-text" fs-12 title="点击左键复制，右键切换" @click="handleCopy"
                    @contextmenu.stop="handleChangeYiyan">「 {{ yiYanData.text }} 」</div>
                <div class="app-yiyan-from" fs-12>--{{ yiYanData.from }}-{{ yiYanData.from_who ? yiYanData.from_who : '' }}</div>
                <div class="app-yiyan-btn">
                    <ul class="app-yiyan-btn-list flex-center">
                        <li class="app-yiyan-btn-item flex-center" title="复制" @click="handleCopy">
                            <el-icon size="14px" color="white">
                                <CopyDocument />
                            </el-icon>
                        </li>
                        <li class="app-yiyan-btn-item flex-center" title="切换" @click="getYiYanData">
                            <el-icon size="14px" color="white">
                                <Refresh />
                            </el-icon>
                        </li>
                        <li class="app-yiyan-btn-item flex-center" title="搜索" @click="handleGoSearch(yiYanData.text)">
                            <i class="iconfont icon-sousuo" style="font-size: 14px;"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <ContextMenu ref="contextMenuRef" v-show="globalStore.contextmenuType == 'main'">
            <template #li>
                <li class="d-contextmenu-item" @click="showModal">
                    <p>添加图标</p>
                    <el-icon size="15">
                        <Plus />
                    </el-icon>
                </li>
            </template>
        </ContextMenu>
        <addIconsModal v-if="addIconsModalVisible" ref="addIconsModalRef" @close="closeAddIconsModal"></addIconsModal>
        <!-- <iframe id="iframeRef" src="https://xiayigejiaqi.com/?from=itab"  :onload="handleLoad" frameborder="0"></iframe> -->
    </div>
</template>

<script setup lang="ts">
import { Close, Plus, CaretBottom, CopyDocument, Refresh } from '@element-plus/icons-vue'
import { SelectType, SearchResultType, AppIconsType } from '@/components/interface/main'
import AppIcons from './components/icons.vue'
import ContextMenu from './components/contextMenu.vue'
import addIconsModal from '@/components/modal/components/addIcons.vue'
import { useAddIconsModal, useContextMenu } from '@/components/modal'
import { Fetch } from '@/api'
import { useGlobalStore } from '@/store/module/global';

const globalStore = useGlobalStore()

const {
    addIconsModalRef,
    addIconsModalVisible,
    showModal,
    closeAddIconsModal
} = useAddIconsModal()

const {
    contextMenuRef,
    showContextMenu,
} = useContextMenu()

//一言
const yiYanData = reactive({
    text: '',
    from: '',
    from_who: ''
})
const handleChangeYiyan = (e: MouseEvent) => {
    e.preventDefault()
    getYiYanData()
}
const getYiYanData = () => {
    Fetch('https://v1.hitokoto.cn/?encode=json&c=d&c=j&c=k&c=k&c=i&lang=cn').then((res: any) => {
        res = JSON.parse(res)
        yiYanData.from = res.from
        yiYanData.from_who = res.from_who
        yiYanData.text = res.hitokoto
    })
}
const handleCopy = () => {
    clickCopy(yiYanData.text)
    Message('已复制到剪切板')
}

const showMainContextMenu = (e: MouseEvent) => {
    globalStore.setContextmenuType('main')
    showContextMenu(e)
}

const inputRef = ref<HTMLInputElement>()
const searchInput = ref('')
const handleReset = () => {
    searchInput.value = ''
    inputRef.value?.focus()
}

const seList = ref<SelectType[]>([
    { title: '百度', icon: 'https://files.codelife.cc/itab/search/baidu.svg', url: 'https://www.baidu.com/s?ie=utf-8&wd=' },
    { title: '谷歌', icon: 'https://files.codelife.cc/itab/search/google.svg', url: 'https://www.google.com/search?q=' },
    { title: '必应', icon: 'https://files.codelife.cc/itab/search/bing.svg', url: 'https://www.bing.com/search?q=' },
    { title: 'github', icon: 'https://files.codelife.cc/itab/search/github.svg', url: 'https://github.com/search?q=' },
])
const selectSeTyle = reactive<SelectType>({
    title: seList.value[0].title,
    icon: seList.value[0].icon,
    url: seList.value[0].url
})
const showSelectList = ref(false)
const handleShowSelect = () => {
    showSelectList.value = !showSelectList.value
}
const handleSelectSeType = (type: SelectType) => {
    selectSeTyle.title = type.title
    selectSeTyle.icon = type.icon
    selectSeTyle.url = type.url
}

const showSearchResult = ref(false)
const searchResultList = ref<SearchResultType[]>([])
const handleSearch = () => {
    if (!searchInput.value) {
        showSearchResult.value = false
        searchResultList.value = []
        return
    }
    Fetch(`https://www.baidu.com/sugrec?&prod=pc&wd=${searchInput.value}`).then((res: any) => {
        showSearchResult.value = true
        searchResultList.value = res.g.map((item: any) => ({
            id: item.sa,
            content: item.q
        }))
    })
}

const focusFlag = ref(false)
const inputFocus = () => {
    if (searchInput.value) {
        focusFlag.value = true
        showSearchResult.value = true
    }
}

//点击搜索结果跳转
const handleGoSearch = (item: string) => {
    if (!item)
        return
    searchInput.value = item
    window.open(selectSeTyle.url + searchInput.value)
    searchInput.value = ''
    showSearchResult.value = false
}

//跳转翻译页面
const handleTranslate = () => {
    window.open(`https://translate.volcengine.com/translate?text=${searchInput.value}`)
}

const current = ref(-1)
const inputKeyEvent = (e: KeyboardEvent) => {
    if (e.key == 'Enter') {
        e.preventDefault()
        handleGoSearch(searchInput.value)
    }
    if (e.altKey && e.key == 'Enter') {
        e.preventDefault()
        handleTranslate()
        searchInput.value = ''
        showSearchResult.value = false
    }
    if (e.key == 'ArrowDown') {
        e.preventDefault()
        current.value++
        if (current.value == searchResultList.value.length)
            current.value = 0
        searchInput.value = searchResultList.value[current.value].content
    }
    if (e.key == 'ArrowUp') {
        e.preventDefault()
        if (current.value >= 0)
            current.value--
        if (current.value == -1)
            current.value = searchResultList.value.length - 1
        searchInput.value = searchResultList.value[current.value].content
    }
}

//滚动
const appIconsRef = ref<AppIconsType>()
const scrollListener = (e: WheelEvent) => {
    appIconsRef.value?.handleScroll(e)
}


const appMainRef = ref<HTMLDivElement>()

const time = ref(new Date().valueOf())
let timer: any = null
onMounted(() => {
    timer = setInterval(() => {
        time.value = new Date().valueOf()
    }, 1000)
    appMainRef.value!.addEventListener('click', clickListener)
    appMainRef.value!.addEventListener('wheel', scrollListener)
    getYiYanData()
    // handleLoad()
})

const handleLoad = () => {
    nextTick(() => {
        const dom = document.getElementById('iframeRef') as HTMLElement
    })
}

const clickListener = () => {
    if (showSelectList.value)
        showSelectList.value = false
    if (showSearchResult.value && !focusFlag.value)
        showSearchResult.value = false
}

onUnmounted(() => {
    clearInterval(timer)
    appMainRef.value!.removeEventListener('click', clickListener)
})
</script>

<style scoped lang="scss">
.app-main {
    display: flex;
    flex-direction: column;
    z-index: 1;

    &-header {
        --height: 3vh;
        height: var(--height);
        transition: .2s;
    }

    &-date {
        &-box {
            color: var(--time-color);
            flex-direction: column;

            &-time {
                font-size: var(--timeSize);
                font-weight: 400;
                line-height: var(--timeSize);

               @include response(phone) {
                    font-size: 60px;
                    line-height: 60px;
                }

                .time-circle {
                    vertical-align: 4px;
                }
            }

            &-week {
                font-size: 14px;
                opacity: .8;

                span {
                    margin: 0 2px;
                    display: inline-block;
                }
            }
        }
    }

    .se-icon {
        width: 20px;
        height: 20px;
    }

    &-search {
        max-width: 600px;
        margin: 3vh auto 20px;
        position: relative;
        z-index: 2;

        @include response(phone) {
            padding: 0 30px;
            margin-top: 16px !important;
            margin-bottom: 16px !important;
        }

        .se-input-box {
            display: flex;
            border-radius: 25px;
            background-color: var(--search-bg);
            overflow: hidden;
            backdrop-filter: blur(18px);
            box-shadow: 0 0 10px 3px #0000001a;

            &:hover {
                background-color: rgba(var(--alpha-bg), .8);
            }

            .se-select {
                min-width: 50px;
                max-width: 50px;
                height: 50px;
                position: relative;


                &:hover {
                    background-color: var(--search-bg);
                }

                .se-down-icon {
                    position: absolute;
                    top: 50%;
                    right: 3px;
                    margin-top: -5px;
                }


            }
            .icon-bg{
                color: rgba(var(--alpha-color),.52);
            }

            .se-input {
                line-height: 50px;
                outline: none;
                border: none;
                background-color: var(--search-input-bg);
                font-size: 14px;
                color: var(--d-main);

                &::-webkit-input-placeholder {
                    font-size: 14px;
                    color: #666;
                }
            }

            .se-close {
                cursor: pointer;
                transition: all .2s;

                &.clear {
                    display: none;
                }
            }
        }

        .se-all {
            margin: 6px 0;
            padding: 10px;
            border-radius: 25px;
            background-color: var(--search-bg);
            backdrop-filter: blur(18px);
            transition: all .2s;
            transform: scaleY(0);
            transform-origin: top;
            position: absolute;
            left: 0;
            right: 0;
            color:var(--d-main);

            @include response(phone) {
               margin: 6px 30px;
            }

            .se-ul {
                list-style: none;
                display: flex;
                flex-wrap: wrap;

                .se-li {
                    width: 64px;
                    border-radius: 8px;
                    padding: 6px 0;
                    text-align: center;
                    cursor: pointer;

                    &:hover {
                        background-color: rgba(var(--alpha-bg), .7);
                    }

                    .se-li-icon {
                        width: 36px;
                        height: 36px;
                        border-radius: 8px;
                        background-color: rgb(var(--alpha-bg));
                        margin: 0 auto;
                    }
                }
            }

        }

        .se-all-show {
            transform: scaleY(1);
        }

        .se-result {
            max-height: 330px;
            position: absolute;
            left: 0;
            right: 0;
            margin-top: 8px;
            border-radius: 20px;
            background-color: var(--search-bg);
            backdrop-filter: blur(15px);
            transform: scaleY(0);
            transition: all .3s;
            transform-origin: top;
            overflow: hidden;

            &-ul {
                list-style: none;

            }

            &-li {
                height: 30px;
                padding: 0 20px;
                line-height: 33px;
                color: rgba(var(--alpha-color), .8);
                font-size: 14px;
                cursor: pointer;
                transition: all .2s;

                &:hover {
                    background-color: rgba(var(--alpha-bg), .3);
                    padding-left: 30px;
                }
            }

            .result-active {
                background-color: rgba(var(--alpha-bg), .3);
                padding-left: 30px;
            }
        }

        .se-result-show {
            transform: scaleY(1);
        }
    }

    &-icons {
        flex: 1 1 0;
    }

    &-footer {
        height: 40px;
        width: 100%;
        color: #ffffffe6;

        .app-yiyan {
            cursor: pointer;
            position: relative;

            &:hover {
                .app-yiyan-from {
                    opacity: 1;
                }

                .app-yiyan-btn {
                    opacity: 1;
                }
            }

            &-text {
                line-height: 20px;
            }

            &-from {
                line-height: 20px;
                text-align: center;
                opacity: 0;
                transition: all .2s ease-in;
            }

            &-btn {
                width: 70px;
                position: absolute;
                left: 100%;
                top: 0;
                backdrop-filter: blur(12px);
                background-color: rgba(var(--alpha-color), .2);
                border-radius: 6px;
                padding: 2px 4px;
                opacity: 0;
                transition: all .2s ease-in;

                &-list {
                    list-style: none;
                }

                &-item {
                    width: 20px;
                    height: 20px;
                    border-radius: 4px;

                    &:hover {
                        background-color: #fff3;
                    }
                }
            }
        }
    }
}

@media screen and (min-height:768px) {
    .app-main-header {
        --height: 6vh
    }
}</style>